<template>
	<view class="outerView">
		<view class="image">
			<image src="/static/addcar.png"></image>
		</view>
		<view class="form">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="车辆品牌">
					<uni-data-select @change="getTypeData" v-model="baseFormData.brandValue" :localdata="brandRange"
						:clear="false" placeholder="请选择车辆品牌"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="车辆类型">
					<uni-data-select v-model="baseFormData.typeValue" :localdata="typeRange" :clear="false"
						placeholder="请选择车辆类型"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="车牌号码">
					<uni-easyinput v-model="baseFormData.carNum" placeholder="请输入您的车牌号码" />
				</uni-forms-item>
				<!-- 				<uni-forms-item label="车主姓名">
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入您的姓名" />
				</uni-forms-item> -->
				<uni-forms-item label="电话号码">
					<uni-easyinput v-model="baseFormData.phoneNum" placeholder="请输入您的电话号码" />
				</uni-forms-item>
				<uni-forms-item label="图片">
					<view class="example-body">
						<uni-file-picker limit="1" title="上传车辆图片"></uni-file-picker>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="button" @click="addCar">
			添加
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					carNum: null, //车牌号码
					// name: '', //车主姓名
					phoneNum: null, //手机号
					// 下拉框
					brandValue: -1, //车辆品牌
					typeValue: -1, //车辆类型
				},
				brandRange: [],
				typeRange: [],
			}
		},
		methods: {
			getBrandData() {
				uni.request({
					url: 'http://localhost/dev-api/user/brand/list/down',
					method: 'GET',
					header: {
						Authorization: getApp().globalData.token
					},
					success: resp => {
						this.brandRange = resp.data
					},
				})
			},
			getTypeData() {
				uni.request({
					url: 'http://localhost/dev-api/user/type/list/down',
					method: 'GET',
					data: {
						bid: this.baseFormData.brandValue,
					},
					header: {
						Authorization: getApp().globalData.token
					},
					success: resp => {
						this.typeRange = resp.data
					},
				})
			},
			addCar(ref) {
				uni.request({
					url: 'http://localhost/dev-api/user/info',
					data: {
						uid: 1,
						type: this.baseFormData.typeValue,
						carNum: this.baseFormData.carNum,
						img: "333"
					},
					method: "POST",
					header: {
						Authorization: getApp().globalData.token
					},
					success: resp => {
						if (resp.data.code == 200) {
							uni.navigateTo({
								url: "/pages/my/myCar/addCar/addSucceed/addSucceed"
							})
						} else {
							console.log("添加失败");
						}
					}
				})
			}
		},
		onLoad() {
			this.getBrandData()
		},
	}
</script>

<style lang="scss">
	.outerView {
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding-bottom: 100rpx;

	}

	// 图片样式
	.image image {
		width: 400rpx;
		height: 400rpx;
	}

	// 表单样式
	.form {
		width: 300px;
		padding: 0 15px;
		background-color: #fff;
	}

	// 上传图片样式
	.example-body {
		padding: 10px 0;
		padding-top: 0;
	}

	.button {
		width: 282px;
		height: 39px;
		background-color: #1D6FFF;
		color: #fff;
		border-radius: 15px;
		text-align: center;
		line-height: 39px;
	}
</style>

<style scoped>
	/deep/.file-title[data-v-363ace0e] {
		font-size: 12px;
		color: #999;
		padding-left: 25rpx;
	}
</style>